import React, { Component } from 'react'
import axios from 'axios';

export default class Search extends Component {

    search = () => {
        //获取用户的输入(连续结构赋值)+重命名
        const {keyWordElement:{value:keyWord}} = this;
        //发送求情前通知List更新状态
        PubSub.publish('search',{isFirst:false,isLoading:true});
        //发送网络请求
        axios.get(`https://api.github.com/search/users?q=${keyWord}`)
        .then(res => {
            //请求成功后通知List更新状态
            PubSub.publish('search',{isFirst:false,isLoading:false,users:res.data.items})
        })
        .catch(err => {
            //请求失败后通知List更新状态
            PubSub.publish('search',{isLoading:false,err:err.message})
        })
    }

    render() {
    return (
        <section className = 'jumbotron'>
            <h3 className='jumbotron-heading'>Search GitHub Users</h3>
            <div>
            <input ref={node => this.keyWordElement = node} type='text' placeholder='enter the name your search'/>&nbsp;
            <button onClick={this.search}>Search</button>
            </div>
        </section>
    )
    }
}
